<template>
  <main-layout
    :showHome="!isFromList"
    :showBack="isFromList"
    :title="`${isEdit ? '编辑' : '新增'}材料信息`"
  >
    <div class="edit-box">
      <van-form @submit="onSubmit">
        <!-- 基本信息 -->
        <div class="formTitle">基本信息</div>
        <van-field
          v-model="formObj.name"
          type="text"
          label="材料名字"
          placeholder="请输入材料名字"
          :rules="[{ required: true, message: '请输入材料名字' }]"
        />
        <van-field
          v-model="formObj.parentId"
          type="text"
          label="所属大类"
          placeholder="请选择材料所属大类"
          readonly
          :rules="[{ required: true }]"
        >
          <template #button>
            <van-button
              size="small"
              type="primary"
              color="#ff5b02"
              native-type="button"
              @click="bigShow = true"
              >选择大类</van-button
            >
          </template>
        </van-field>
        <van-field
          v-model="formObj.remark"
          type="textarea"
          autosize
          label="备注"
          placeholder="请输入备注"
        />

        <div style="margin: 12px 0px">
          <van-button
            round
            block
            type="info"
            native-type="submit"
            color="#ff5b02"
            >提交</van-button
          >
        </div>
      </van-form>
      <van-popup
        v-model="bigShow"
        round
        position="bottom"
        :style="{ height: '45%' }"
      >
        <van-picker
          title="选择材料所属大类"
          show-toolbar
          :columns="columns"
          @confirm="onConfirm"
          @cancel="bigShow = false"
        />
      </van-popup>
    </div>
  </main-layout>
</template>
<script>
import { materialListApi } from "../../apis/PurchaseApi";
import {
  materialSaveApi,
  materialUpdateApi,
  materialDeleteApi,
} from "../../apis/ProductApi";
export default {
  data() {
    return {
      columns: [],
      loading: false,
      hasMore: true,
      // 是否来自项目管理页面
      isFromList: false,
      // 是否通过编辑按钮过来
      isEdit: false,
      // 是否显示选择大类组件
      bigShow: false,

      // 表单v-modoule
      formObj: {
        id: "",
        parentId: "",
        name: "",
        remark: "",
      },
      // 查询用户信息的查询对象
      personQuery: {
        name: "",
        page: 1,
        size: 20,
      },
      // 选择大类列表
      List: [],
    };
  },
  created() {
    this.isFromList = !!this.$route.query.from;
    this.isEdit = !!this.$route.query.id;
    this.editObjList();
    this.getProductList();
  },
  methods: {
    onConfirm(value) {
      this.formObj.parentId = value;
      this.bigShow = false;
    },
    // 如果从编辑页面过来，处理数据
    //  this.$route.params.row.name
    editObjList() {
      if (!!this.isEdit) {
        this.formObj.id = this.$route.params.row.id;
        this.formObj.name = this.$route.params.row.name;
        console.log(this.$route.params.row);
        this.formObj.parentId = this.$route.params.row.parentId;
        this.formObj.remark = this.$route.params.row.remark;
      }
    },
    // 提交按钮时间
    async onSubmit() {
      if (!!this.isEdit) {
        let resultUpdate = await materialUpdateApi(this.formObj);
        if (resultUpdate.code === 200) {
          this.$toast.success("材料数据修改成功");
        } else {
          this.$toast.fail("材料数据修改失败");
        }
      } else {
        let result = await materialSaveApi(this.formObj);
        if (result.code === 200) {
          this.$toast.success("保存成功");
        } else {
          this.$toast.fail("保存失败");
        }
      }
    },

    async getProductList() {
      let result = await materialListApi(this.personQuery);
      if (result.code === 200) {
        this.List = this.List.concat(result.data.rows);
        this.columns = this.List.map((item) => {
          return item.name;
        });
        this.columns.unshift("请选择");
      }
    },
  },
};
</script>
<style lang="less" scoped>
@import "./index.less";
</style>